<template>
  <div class="box_yj sectionss" ref="parent">
    <span></span>
    
    <div class="section-header">专业分布</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentIn_ProfessionalDistribution } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      data: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    },
    xAxisData() {
      let tempData = this.data.map(v=>v.Census);
      let tempArr = [];
      tempData.forEach(v=>{
        if(tempArr.indexOf(v) === -1){
          tempArr.push(v);
        }
      });
      return tempArr
    },
    legendData() {
      let tempData =  this.data.map(v=>v.Major);
      let tempArr = [];
      tempData.forEach(v=>{
        if(tempArr.indexOf(v) === -1){
          tempArr.push(v);
        }
      });
      return tempArr.reverse()
    },
    yAxisData() {
      let tempArr = [];
      this.legendData.forEach(v=>{
        let seriesData = this.data.filter(k=>k.Major === v);
        tempArr.push({
          name: v,
          type: 'bar',
          barGap: 0,
          data: seriesData.map(v=>v.number)
        });
      });
      return tempArr;
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      get_TalentIn_ProfessionalDistribution(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.data = data;
        this.initcharts();
      });
    },
    initcharts() {
		console.log('aaaaaaaaaaaaaaaaaaaaaaaa')
		console.log(this.legendData)
		console.log(this.xAxisData)
		console.log(this.yAxisData)
      let option = {
          color: ['#87f7cf', '#f7f494', '#fc97af', '#f7c5a0', '#72ccff'],
          tooltip: {
              trigger: 'axis',
        transitionDuration:0,
              axisPointer: {
                  type: 'shadow'
              }
          },
          grid: {
            top: 40,
            left: 25,
            right: 0,
            bottom: 20
          },
          legend: {
              data: this.legendData,
              textStyle: {
                color: 'rgba(255,255,255,1)'
              },
              left: 0,
              width: this.setStyle - 30,
              itemWidth: 10,
              itemHeight: 10,
              top: 10
          },
          xAxis: [
              {
                  type: 'category',
                  axisTick: {show: false},
                  data: this.xAxisData,
                  axisLabel: {
                    textStyle: {
                      color: '#8ebafb'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      color: 'rgba(255,255,255,.5)'
                    }
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  splitLine: {show: false},
                  axisTick: {show: false},
                  axisLabel: {
                    textStyle: {
                      color: '#8ebafb'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      color: 'rgba(255,255,255,.5)'
                    }
                  }
              }
          ],
          series: this.yAxisData
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .sectionss
    margin-top 20px
  .rank-component
    margin-top 15px
</style>